<!--
 * @Author: Bennty
 * @Date: 2024-07-29 11:39:46
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-29 17:14:39
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <el-row >
            <el-col :span="16">
                <el-row class="top-information" :gutter="30">
                    <el-col :span="8">
                        <el-row class="send">
                            <el-col :span="12" class="send-info">
                                <h3>今日需发货数</h3>
                                <p>1100套</p>
                            </el-col>
                            <el-col :span="12" class="sended">
                                <h3>已发货数</h3>
                                <p>500套</p>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <el-row class="send">
                            <el-col :span="12" class="send-info">
                                <h3>今日需收款发货数</h3>
                                <p>8000套</p>
                            </el-col>
                            <el-col :span="12" class="sended">
                                <h3>已发货数</h3>
                                <p>500套</p>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <el-row class="send">
                            <el-col :span="24">
                                <h3>今日生产备货数</h3>
                                <p>500套</p>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <div class="product-info">
                    <div class="title-cont">
                        <div class="title">
                        <h2>今日关联产品信息</h2>
                    </div>
                    <div class="filter">
                        <el-form :model="queryForm" :inline="true" ref="formRef">
                            <el-form-item label="预计发货日期" prop="date" label-position="right" label-width="100">
                                <el-date-picker type="date" placeholder="年/月/日" v-model="queryForm.date" format="YYYY/MM/DD" value-format="YYYY/MM/DD" />
                            </el-form-item>
                            <el-form-item label="展示类别" prop="type" label-position="right" label-width="70">
                                <el-select v-model="queryForm.type">
                                    <el-option label="全部" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    </div>
                    <div class="info-table">
                        <el-table :data="infoList"  stripe>
                            <el-table-column label="发货类型" prop="type"></el-table-column>
                            <el-table-column label="关联订单预计发货日期" prop="date"></el-table-column>
                            <el-table-column label="关联订单预计发货数量" prop="number"></el-table-column>
                            <el-table-column label="客户名称" prop="customerName"></el-table-column>
                            <el-table-column label="产品名称" prop="productName"></el-table-column>
                            <el-table-column label="当前库存箱数" prop="inventoryCase"></el-table-column>
                            <el-table-column label="当前库存套数" prop="inventorySuit"></el-table-column>
                            <el-table-column label="产品单价">
                                <template #default="scope">
                                    <span>{{ `￥${scope.row.unitePrice}` }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="库存总价">
                                <template #default="scope">
                                    <span>{{ `￥${scope.row.totalPrice}` }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="today-tosend">
                    
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { infoVO } from '@/api/sj/warehouse/warehouseInfo/types';

const formRef = ref<FormInstance>();
const infoList = ref<infoVO[]>([]);
const data = reactive({
    queryForm:{
        date: undefined,
        type: '1'
    }
});
const { queryForm } = toRefs(data);

onMounted(() => {
    for(let i = 1;i<=30; i++){
        let info = {
            id: i,
            type: '零周转' + i,
            date: '2024-01-28',
            number: 500,
            customerName: '梧桐树',
            productName: '五桐树F款塑料餐具套装（5人份）',
            inventoryCase: 20,
            inventorySuit: 2000,
            unitePrice: 8.00,
            totalPrice: 16000.00
        };
        infoList.value?.push(info);
    };

});
</script>

<style lang="scss" scoped>
.send{
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    display: flex;
    padding: 20px;
    h3{
        text-align: center; 
    }
    p{
        text-align: center;
    }
    .send-info{
        border-right: 1px solid black;
    }
}
.title-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>